Multi-pane graphical user interface for mobile electronic device

ABSTRACT

Improved approaches to display information on a portable computing device having a display with limited display area are disclosed. The information displayed can, for example, assist a user in navigating a hierarchical menu system operable on the portable computing device to browse, search or play media items. In one embodiment, the information displayed can be presented in a multi-pane display screen (or graphical user interface). One pane can present a list of selectable items, such as a list of selectable media items. The list can represent one menu in the hierarchical menu system. Another pane can present other information that can be related to the list being displayed. For example, the other information can be data contextually related to the list. In one embodiment, the size of the panes of a multi-pane display screen can adapt dependent on user interaction and/or characteristics of the data being display.

CROSS-REFERENCE TO OTHER APPLICATION

This application references U.S. patent application Ser. No. 11/849,923,filed Sep. 4, 2007, entitled “GRAPHICAL USER INTERFACE FOR MOBILEELECTRONIC DEVICE”, which is hereby incorporated herein by reference.

COPYRIGHT NOTICE

A portion of the disclosure of this patent document contains materialthat is subject to copyright protection. The copyright owner has noobjection to the facsimile reproduction by anyone of the patent documentor the patent disclosure as it appears in the U.S. Patent and TrademarkOffice patent file or records, but otherwise reserves all copyrightrights whatsoever.

BACKGROUND OF THE INVENTION

1. Field of the Invention

The present invention relates to mobile electronic devices and, moreparticularly, to graphical user interfaces for mobile electronicdevices.

2. Description of the Related Art

Mobile devices, such as Personal Digital Assistants (PDAs), digitalmedia players and mobile phones, often include displays which are usedto present graphical user interfaces. These graphical user interfacesprovide a means for the mobile devices to present information to users.However, since mobile devices are usually desired to be small andlightweight, it is difficult for mobile devices to include largedisplays while also being small and lightweight. Hence, there aredifficult design tradeoffs in designing mobile devices because a largerdisplay typically requires a larger device. Thus, since the size ofdisplays on mobile devices is limited, there is a need to better utilizedisplays on mobile devices.

SUMMARY OF THE INVENTION

The invention pertains to improved approaches to display information ona portable computing device having a display with limited display area.The information displayed can, for example, assist a user in navigatinga hierarchical menu system operable on the portable computing device tobrowse, search or play media items. In one embodiment, the informationdisplayed can be presented in a multi-pane display screen (or graphicaluser interface). One pane can present a list of selectable items, suchas a list of selectable media items. The list can represent one menu inthe hierarchical menu system. Another pane can present other informationthat can be related to the list being displayed. For example, the otherinformation can be data contextually related to the list. In oneembodiment, the size of the panes of a multi-pane display screen canadapt dependent on user interaction and/or characteristics of the databeing display.

The invention can be implemented in numerous ways, including as amethod, system, device, or apparatus (including graphical user interfaceand computer readable medium). Several embodiments of the invention arediscussed below.

As a method for presenting a display screen on a display of a portableelectronic device, one embodiment of the invention includes at least:identifying a display screen to be displayed on the display of theportable electronic device, the identified display screen being one of aplurality of display screens that are available to be displayed on thedisplay of the portable electronic device, and the identified displayscreen having at least a first pane and a second pane; displaying thedisplay screen using a default presentation, with selectable menu itemsbeing displayed in the first pane of the identified display screen, andwith contextually relevant information being displayed in the secondpane of the identified display screen; determining whether a user inputhas been received with respect to the first pane of the identifieddisplay screen; determining, based on the user input, whether at leastone of the selectable menu items being displayed in the first pane ofthe identified display screen should be displayed using an enlargedpresentation; and subsequently displaying the display screen using anenlarged presentation when the determining determines that at least oneof the selectable menu items should be displayed in the enlargedpresentation, with at least the identified one of the selectable menuitems being displayed in the first pane of the identified display screenin an enlarged display area, and with the contextually relevantinformation being displayed in the second pane of the identified displayscreen in a reduced display area.

As a mobile computing device, one embodiment includes at least: adisplay device for displaying a graphic user interface; and a processingdevice for operating to present the graphical user interface on thedisplay device. The graphical user interface includes at least a firstportion that displays first data, and a second portion that displayssecond data, the second data being associated with the first data. Theprocessing device is configured to: determine whether the first datashould be presented in an enlarged first portion, and update thegraphical user interface being presented to enlarge the first portionand reduce the second portion when it is determined that the first datashould be presented in an enlarged first portion.

As a method for presenting a display screen on a display of a portableelectronic device, another embodiment of the invention includes atleast: displaying the display screen using a default presentation, thedisplay screen having at least a first pane and a second pane;determining whether user input with respect to the first pane has beenreceived; and updating the display screen being displayed from thedefault presentation to the enlarged presentation of the first pane whenthe determining determines that the user input with respect to the firstpane has been received, the enlarged presentation of the first panehaving an enlarged first pane as compared to the first pane of thedefault presentation, and the enlarged presentation of the first panehaving a reduced second pane as compared to the second pane of thedefault presentation.

As a mobile computing device, another embodiment includes at least: adisplay device for displaying a graphic user interface; and a processingdevice for operating to present the graphical user interface on thedisplay device. The graphical user interface includes at least a firstportion that displays first data, and a second portion that displayssecond data, the second data being associated with the first data. Theprocessing device is configured to: determine whether a user input withrespect to the first pane has been received, and update the graphicaluser interface being presented to enlarge the first portion and reducethe second portion when it is determined that a user input with respectto the first pane has been received.

As a method for presenting a display screen on a display of a portableelectronic device, another embodiment of the invention includes atleast: identifying a display screen to be displayed on the display ofthe portable electronic device, the identified display screen being oneof a plurality of display screens that are available to be displayed onthe display of the portable electronic device, and the identifieddisplay screen having a display screen area divided amongst at least afirst pane and a second pane; identifying first data to be presented inthe first pane of the identified display screen; allocating a portion ofthe display screen area to present the first pane of the identifieddisplay screen based on at least the first data to be presented in thefirst pane of the identified display screen; and presenting theidentified display screen on the display with at least a portion of thefirst data being presented in the first pane. The first pane can besized in accordance with the determined portion of the display screenarea that is allocated to present the first pane of the identifieddisplay screen.

As a method for presenting a display screen on a display of a portableelectronic device, another embodiment of the invention includes atleast: identifying a multi-pane display screen to be displayed on thedisplay of the portable electronic device, the identified display screenbeing one of a plurality of display screens that are available to bedisplayed on the display of the portable electronic device, and theidentified display screen having a display screen area divided amongstat least a first pane and a second pane; identifying first data to bepresented in a first pane of a multi-pane display screen; determining adisplay format for the multi-pane display screen based on at least thefirst data to be presented in the first pane; and presenting themulti-pane display screen on the display in accordance with thedetermined display format and with at least a portion of the first databeing presented in the first pane.

As a mobile computing device, another embodiment includes at least: adisplay device for displaying a graphic user interface; and a processingdevice for operating to present the graphical user interface on thedisplay device. The graphical user interface includes at least a firstportion that displays first data, and a second portion that displayssecond data, the second data being associated with the first data. Theprocessing device is configured to dynamically size the first portion ofthe graphical user interface based on at least the first data, and asthe size of the first portion of the graphical user interface enlarges,the size of the second portion of the graphical user interface getssmaller.

As a method for presenting a display screen on a display of a portableelectronic device, one embodiment of the invention includes at least:displaying the display screen having at least a first pane and a secondpane; displaying a list of selectable items in the first pane; receivingan identification of one of the selectable items being displayed in thefirst pane; determining whether contextual content pertaining to theidentified item is available at the portable electronic device;displaying the contextual content in the second pane if it is determinedthat the contextual content is available to the portable electronicdevice; and displaying default content in the second pane if it isdetermined that the contextual content is unavailable to the portableelectronic device.

As a mobile computing device, another embodiment includes at least: adisplay device for displaying a graphic user interface; and a processingdevice for operating to present the graphical user interface on thedisplay device. The graphical user interface includes at least a firstportion that displays a list of selectable items, and a second portionthat displays contextual content pertaining to one or more of theselectable items displayed in the first portion. The processing deviceis configured to: receive an identification of one of the selectableitems being displayed in the first pane; determine whether contextualcontent pertaining to the identified item is available at the mobilecomputing device; display the contextual content in the second pane tothe extent determined to be available; and display default content inthe second pane if the contextual content is determined to beunavailable at the mobile computing device.

Other aspects and advantages of the invention will become apparent fromthe following detailed description taken in conjunction with theaccompanying drawings which illustrate, by way of example, theprinciples of the invention.

BRIEF DESCRIPTION OF THE DRAWINGS

The invention will be readily understood by the following detaileddescription in conjunction with the accompanying drawings, wherein likereference numerals designate like structural elements, and in which:

FIG. 1 is a flow diagram of a screen presentation process according toone embodiment of the invention.

FIG. 2 is a flow diagram of a screen transition process according to oneembodiment of the invention.

FIG. 3 is a flow diagram of a media item presentation process accordingto one embodiment of the invention.

FIG. 4 is a flow diagram of a UI event process according to oneembodiment of the invention.

FIGS. 5A-5E are exemplary display screens that can be presentedaccording to certain embodiments of the invention.

FIGS. 6A-6E are exemplary display screens that can be presentedaccording to certain embodiments of the invention.

FIG. 7 is a flow diagram of a media collection presentation processaccording to one embodiment of the invention.

FIGS. 8A-8D are exemplary display screens that can be presentedaccording to certain embodiments of the invention.

FIG. 9A is a flow diagram of a display screen presentation processaccording to one embodiment of the invention.

FIG. 9B is a flow diagram of a display screen presentation processaccording to one embodiment of the invention.

FIGS. 9C and 9D are flow diagrams of a display screen presentationprocess 940 according to one embodiment of the invention.

FIGS. 10A-10C are exemplary display screens according to variousembodiments of the invention.

FIG. 11 is a flow diagram of a display screen presentation processaccording to one embodiment of the invention

FIG. 12 is a flow diagram of a display screen presentation processaccording to one embodiment of the invention.

FIG. 13A is a flow diagram of a display screen presentation processaccording to one embodiment of the invention.

FIGS. 13B-13D are exemplary display screen formats for a multi-panedisplay screen according to certain embodiments of the invention.

FIGS. 14A-14D are exemplary display screens according to variousembodiments of the invention.

FIG. 15 is a flow diagram of a display screen presentation processaccording to one embodiment of the invention.

FIGS. 16A-16C are exemplary screen displays according to variousembodiments of the invention.

FIG. 17 is a block diagram of a mobile multi-function device accordingto one embodiment of the invention.

DETAILED DESCRIPTION OF THE INVENTION

The invention pertains to improved approaches to display information ona portable computing device having a display with limited display area.The information displayed can, for example, assist a user in navigatinga hierarchical menu system operable on the portable computing device tobrowse, search or play media items. In one embodiment, the informationdisplayed can be presented in a multi-pane display screen (or graphicaluser interface). One pane can present a list of selectable items, suchas a list of selectable media items. The list can represent one menu inthe hierarchical menu system. Another pane can present other informationthat can be related to the list being displayed. For example, the otherinformation can be data contextually related to the list. In oneembodiment, the size of the panes of a multi-pane display screen canadapt dependent on user interaction and/or characteristics of the databeing display. Still further, in one embodiment, information can bedisplayed such that there is a graceful degradation of the contextualinformation while the contextual information is unavailable.

Embodiments of the invention are discussed below with reference to FIGS.1-17. However, those skilled in the art will readily appreciate that thedetailed description given herein with respect to these figures is forexplanatory purposes as the invention extends beyond these limitedembodiments.

FIG. 1 is a flow diagram of a screen presentation process 100 accordingto one embodiment of the invention. The screen presentation process 100identifies 102 a display screen to be displayed. The display screen canpertain to a graphical user interface to be presented on a displaydevice of an electronic device. The electronic device can, for example,pertain to a portable electronic device such as a digital media playeror a multi-function electronic device that supports media playback.

A decision 104 determines whether the display screen that has beenidentified 102 has multiple panes. A display screen having multiplepanes effectively divides it screen area into different sections,portions, regions or areas. In one embodiment. A display screen that hastwo panes can be referred to as a split screen since the screen area issplit into two panes. When the decision 104 determines that the displayscreen does not have multiple panes, the display screen can be presented106 without use of multiple panes.

On the other hand, when the decision 104 determines that the displayscreen does have multiple panes, a configuration for the multiple panesis determined 108. The determination 108 of the configuration for themultiple panes can be predetermined or dynamically determined. Theconfiguration can, for example, be programmatically predetermined orpredetermined based on attributes associated with the display screen oruser settings. The configuration can, for example, be dynamicallydetermined based on one or more of the particular display screen (e.g.,attributes associated with the display screen), position of the displayscreen within a hierarchical menu system, the type of information beingpresented in the display screen, user settings, user input, etc. As anexample, the configuration for the multiple panes can utilize one ofvarious layouts. The layouts can size and position the panesdifferently. For example, the display screen can be segregated into apair of equally sized panes, or the display screen can be segregatedinto disproportionately sized panes. In one implementation, one pane canutilize three-fourths of the display screen area while the other panecan utilize one-fourth of the display screen area. In anotherimplementation, one pane can utilize two-thirds of the display screenarea while the other pane can utilize one-third of the display screenarea.

After the configuration for the multiple panes of the display screenhave been determined 108, selectable menu items can be displayed 110 ina first pane of the display screen. Further, contextually relevantinformation can be displayed 112 in a second pane of the display screen.In one implementation, the information being displayed 112 in the secondpane of the display screen can be generally contextually relevant to oneor more of the menu items in the first pane. In another implementation,the information being displayed 112 in the second pane of the displayscreen can be specifically contextually relevant to an identified one ofthe media items being displayed in the first pane. Following the block106 or 112, the screen presentation process 100 ends.

FIG. 2 is a flow diagram of a screen transition process 200 according toone embodiment of the invention. The screen transition process 200displays 202 in an initial display screen. As an example, the initialdisplay screen can be displayed 202 on a display device associated withan electronic device, such as a portable electronic device. The initialdisplay screen is a graphical user interface that is displayed on thedisplay device association with the electronic device.

A decision 204 then determines whether a next display screen is to bepresented on the display device. The next display screen is also agraphical user interface that is displayed on the display deviceassociation with the electronic device. When the decision 204 determinesthat a next display screen is not to be presented at this time, adecision 206 determines whether the screen transition process 200 shouldend. When the decision 206 determines that the screen transition process200 should end, then the screen transition process 200 can end.Alternatively, when the decision 206 determines that the screentransition process 200 should not end, the screen transition process 200returns to repeat the decision 204 and subsequent blocks.

Once the decision 204 determines that a next display screen should bedisplayed, a next display screen to be displayed is identified 208. Atransition style to the next display screen can also be determined 210.The transition style can be specified by the next display screen can bepredetermined, such as through preprogramming. Alternatively, thetransition style can be dynamically determined by examination of thetype of initial display screen and the type of next display screen.Thereafter, the next display screen is displayed 212 in accordance withthe transition style. Following the block 212, the screen transitionprocess 200 returns to repeat the decision 204 and subsequent blocks sothat yet another next display screen can be similarly processed.

By transitioning through various display screens, a user of theelectronic device is able to navigate a hierarchical menu system. Thetransitions that are determined and utilized serve to enhance the userexperience with respect to interaction with the graphical userinterface. The transitions can use animation or other visual effects.One example of a transition is a cross-fade, where one display screenfades out while another fades in. Another example of a transition iswhere one display screen is pushed off while another display screen ispushed on. In some cases the transition is applied to only a portion(e.g., pane) of a display screen.

The display screens discussed above can, in one embodiment, beimplemented as a hierarchy of cards. A card refers to a particularinstance of a display screen in which the information is organized in apredetermined layout. A card can include static content and/or dynamiccontent.

FIG. 3 is a flow diagram of a media item presentation process 300according to one embodiment of the invention. The media itempresentation process 300 can display 302 a first menu in a first portionof a display screen for a portable electronic device. The display screenis a graphical user interface that is displayed on a display (displaydevice) of the portable electronic device. A portion of a display screencan, for example, pertains to a pane or window within the displayscreen.

Next, a media item to be displayed can be determined 304 from aplurality of media items resident on the portable electronic device. Agraphical image corresponding to the determined media item can then bedisplayed 306 in a second portion of the display screen. Here, thegraphical image is displayed 306 in the second portion of the displayscreen while the first menu is being displayed 302 in the first portionof the display screen.

A decision 308 can determine whether another media item is to bepresented in the second portion. When the decision 308 determines thatanother media item is not yet to be presented in the second portion, adecision 310 can determine whether a user interface (UI) event has beenreceived. When the decision 310 determines that a UI event has beenreceived, the UI event can be processed 312 so that the display screencan be accordingly updated. Alternatively, when the decision 310determines that a UI event has not been received, then the media itempresentation process 300 can return to repeat the block 308.

Once the decision 308 determines that another media item is to bepresented in the second portion, another media item to be displayed isdetermined 314 from a plurality of media items resident on the portablemedia device. Following the block 314, the media item presentationprocess 300 can return to repeat the block 306 so that a graphiccorresponding to the newly determined media item can be displayed in thesecond portion of the display screen.

Hence, according to one embodiment, the media item presentation process300 can automatically operate to periodically change the graphical imagebeing displayed in the second portion of the display screen. Althoughthe graphical image can be periodically changed, the display of thefirst menu can remain until user selection causes navigation to anothermenu or other media information.

Additionally, according to one embodiment, as the graphical image beingdisplayed in the second portion of the display screen changes from onegraphical image to another, transition effects can be utilized toimprove the user experience. For example, a cross-fade effect can beutilized to transition from display of an earlier graphical image todisplay of a new graphical image.

Also, in another embodiment, while displaying a graphical image, variouseffects can be utilized to provide an improved user experience. Forexample, the graphical image being displayed can be panned, rotated,skewed, compressed, clipped, etc. while being displayed within thesecond portion of the display screen. For example, in one embodiment,the second portion of the display screen is often smaller than the sizeof the graphical image. In such case, panning, rotating, skewing,compressing, or clipping or the like can serve to make the graphicalimage more exposed to the user even though the size of the secondportion is limited. Clipping can, for example, clip ends or edges of agraphical image so as to better fit (i.e., correlate) within the secondportion. Compressing can, for example, be non-linear across thegraphical image, such as ends or edges can be compressed more thatcentral portions. In one implementation, the panning, rotating, skewing,compressing, or clipping of the graphical image being displayed in thesecond portion can be automatically performed (i.e., without userinteraction) by the portable electronic device. For example, bydynamically changing the panning, rotating, skewing, compressing, orclipping of the graphical image, the graphical image can appear to beanimated or undergoing movement to expose different portions of thegraphical image.

FIG. 4 is a flow diagram of a UI event process 400 according to oneembodiment of the invention. The UI event process 400 is, for example,processing suitable for use in the block 312 of the media itempresentation process 300 illustrated in FIG. 3.

The UI event process can begin with a decision 402 that determineswhether a new menu for a first portion is to be displayed. When thedecision 402 determines that a new menu is to be displayed, a decision404 can determine whether the new menu has the same screen layout as thecurrent menu. When the decision 404 determines that the display screenlayout is not the same, then a transition from the existing layout tothe new layout can be determined 406. Following the block 406, ordirectly following the decision 404 when the display screen layout isthe same, a new menu can be displayed 408 in the first portion of thedisplay screen. In a case in which a transition has been determined 406,the display 408 of the new menu will transition from the old menu in theold layout to the new menu in the new layout in accordance with thedetermined transition.

A decision 410 can then determine whether the content for the secondportion of the display screen is dependent on selection of a media itemfrom the new menu. When the decision 410 determines that the content forthe second portion is dependent on a selection of the media items fromthe new menu. A media item to be displayed can be determined 412 basedon the selected menu item. For example, if the selected menu item is amedia collection, such as an album, that has album artwork (e.g., coverart) associated therewith, then the album artwork can be determined asthe content to be displayed in the second portion of the display screen.Following the block 412, the UI event process 400 has transitioned todisplay of the new menu in the first portion of the display screen andhas identified content to be displayed in the second portion of thedisplay screen. Hence, following the block 412, the UI event process 400can return to the block 306 of the media item presentation process 300to display a graphical image corresponding to the determined content inthe second portion of the display screen.

On the other hand, when the decision 410 of the UI event process 400determines that content for the second portion of the display screen isnot dependent on selection of a media item from the new menu, then theUI event process 400 can transition to the block 304 of the media itempresentation process 300 where the media item to be next displayed canbe determined from the plurality of media items resident on the portableelectronic device.

When the decision 402 determines that a new menu is not to be displayed,a decision 414 can determine whether the UI event is a play request.When the decision 414 determines that the UI event is a play request,then playback information can be displayed 416 on the display screen.Following the block 416, or following the decision 414 when the UI eventis not a play request, other processing 418 can be performed. The otherprocessing 418 can be performed to carry out the other UI events.

FIGS. 5A-5E are exemplary display screens that can be presentedaccording to certain embodiments of the invention. For example, one ormore of these exemplary display screens can be presented by the screenpresentation process 100 illustrated in FIG. 1, the screen transitionprocess 200 illustrated in FIG. 2, the media item presentation process300 illustrated in FIG. 3, or any other suitable process.

FIG. 5A is an exemplary display screen 500 according to one embodimentof the invention. The display screen 500 includes a first portion 502and a second portion 504. The display screen 500 can also be referred toas a split screen. The first portion 502 includes a menu having a listof selectable items. The first portion 502 can also include a headerhaving a name 508 (e.g., device type, descriptor or name) and a statusindicator 510. The name 508 in FIG. 5A is “Media Player” whichcorresponds to the nature of the portable electronic device orapplication software utilizing the display screen 500. The statusindicator 510 can represent any status condition associated with theportable electronic device, such as battery status, networkavailability, alerts (email, calendar, etc.), data storage availability,etc. The second portion 504 can contain and present a graphical image512. In one embodiment, the display screen 500 is presented on a displayof a portable electronic device and the graphical image 512 represents agraphical image stored on the portable electronic device. For example,the graphical image 512 can represent a media collection or media itemstored on the portable electronic device.

FIG. 5B is an exemplary display screen 520 according to one embodimentof the invention. The display screen 520 is similar to the displayscreen 500 illustrated in FIG. 5A. However, the second portion 504 ofthe display screen 520 present a graphical image 522. The graphicalimage 522 is a different image that is displayed subsequent to thedisplaying of the graphical image 512 as in FIG. 5A. In one embodiment,the second portion 504 can periodically display a different graphicalimage. These graphical images can represent digital media assets, suchas those digital media assets stored on the portable electronic device.

FIG. 5C is an exemplary display screen 540 according to one embodimentof the invention. The display screen 540 represents a transition fromthe display screen 500 illustrated in FIG. 5A and the display screen 520illustrated in FIG. 5B. In this regard, the second portion 504illustrates a transition phase wherein the graphical image 512 is fadingout and the graphical image 522 is fading in. Further, in oneembodiment, the second portion 504 can transition from the graphicalimage 512 to the graphical image 522 by sliding the graphical image 512out of the second portion 504 while sliding the graphical image 522 intothe second portion 504. Hence, as illustrated in FIG. 5C, the graphicalimage 512 has begun to slide out in a right-to-left manner and thegraphical image 522 has begun to slide in a right-to-left manner.

FIG. 5D is an exemplary display screen 560 according to one embodimentof the invention. The display screen 560 represent an animated displayof a graphical image 562. For example, the graphical image 562 is thesame as the graphical image 522; however, the graphical image 562 isundergoing movement whereas the graphical image 522 can be stationary.The movement applied to the graphical image 562 can server to provide auser friendly animation. For example, the animation can move thegraphical image 562 left, right, up and/or down. More generally, themovement can be linear or non-linear. The movement can be advantageoussuch as when the graphical image 562 has a size that is larger than thesecond portion 504, whereby the movement can allow more of the graphicalimage 562 to be visible. Additionally or alternatively, the graphicalimage 562 can be rotated and/or skewed.

FIG. 5E is an exemplary display screen 580 according to one embodimentof the invention. The display screen 580 represents a graphical image582 that is a skewed version of the graphical image 522. The skewing ofthe graphical image 582 causes the image to be displayed with a depth offield. The depth of field can give the graphical image 582 athree-dimensional (3D) appearance although the graphical image 582 isonly a two-dimensional (2D) rendering. The skewing can be advantageoussuch as when the graphical image 522 has a size that is larger than thesecond portion 504, whereby the skewing can allow more of the graphicalimage 582 to be visible. Besides skewing the graphical image 582, thegraphical image 582 can also be compressed (or compacted) horizontallyto enhance the portion of the image that is able to be visible. Sincegraphical images are able to generally retain their appearance eventhough some skew or compression has been applied, the graphical imagebeing presented can remain high quality even though some distortionresults from the skew or compression.

In FIGS. 5A-5E, the size of the first portion 502 is the same as thesize of the second portion 504. However, in some embodiments, the firstportion 502 contains the primary user interface components. Hence, insome display screen layouts, the second portion 504 is smaller than thefirst portion 502. For example, in other layout arrangements, the secondportion 504 can be one-third or one-fourth of the total size (e.g.,width) of the display screen. In such cases, the movement and/or skewingnoted above (e.g., in FIGS. 5D and 5E) can assist in improving theamount of the graphical image that can be presented (i.e., visible) inthe second portion 504.

Additionally, it should be noted that in the FIGS. 5A-5E, the firstportion 502 includes a header with a name 508 and a status indicator510. However, in contrast, the second portion 504 does not include sucha header. Accordingly, in one embodiment, the second portion 504 is ableto maximize it vertical usage of a display by not including a header.With portable electronic devices, the display device (i.e., screen size)is often substantially limited so maximizing vertical usage isadvantageous.

FIGS. 6A-6E are exemplary display screens that can be presentedaccording to certain embodiments of the invention. For example, one ormore of these exemplary display screens can be presented by the screenpresentation process 100 illustrated in FIG. 1, screen transitionprocess 200 illustrated in FIG. 2, media item presentation process 300illustrated in FIG. 3, or media collection presentation process 700.

FIG. 6A is an exemplary display screen 600 according to one embodimentof the invention. The display screen 600 includes a first portion 602and a second portion 604. The first portion 602 includes a menu 605having a list of selectable items. A user can scroll or navigate throughthe list and cause one of the selectable items to be visually designated606. The first portion 602 can also include a header 608 that canspecify a name 610 for the menu and/or provide status information 612.The second portion 604 can present a graphical image 614. In oneembodiment, the graphical image 614 is contextually relevant. In oneimplementation, the graphical image 614 can pertain to a graphical imagethat is contextually relevant to the menu 605. For example, asillustrated in FIG. 6A, the menu 604 is denoted “Music” and thus thegraphical image 614 can pertain to a music type digital media assetavailable to the portable electronic device.

From the exemplary display screen 600, the user of the portableelectronic device can, through a user action (e.g., UI event), selectthe selectable item of the menu 605 that is visually designated 606. Inresponse to such a user selection, another exemplary display screen suchas illustrated in FIG. 6C is displayed. FIG. 6B illustrates transitionfrom display of the exemplary display screen 600 (shown in FIG. 6A) todisplay of another exemplary display screen (shown in FIG. 6C).

FIG. 6B is an exemplary display screen 620 according to one embodimentof the invention. The display screen 620 represents a transition fromthe display screen 600 to another exemplary display screen (FIG. 6C).The first menu 605 for Music is transitioned to move right-to-left outof the first portion 602, while a new menu 622 is inserted into thefirst portion 602 right-to-left with respect to the first portion 602.The new menu 622 is an Artists menu that is automatically transitionedfrom the first menu 605 once the user causes selection of the selectableitem of the menu 605 that is visually designated 606 (i.e., Artists).Also, during the transition, the first portion 602 can be enlarged whilethe second portion 604 reduced. As illustrated in FIG. 6B, since thesize of the second portion 604 has been reduced (e.g., in width), lessof the graphical image 614 is now able to be displayed in the secondportion 604. In this example, a portion of the left side of thegraphical image 614 is no longer visible in the display screen 620.

FIG. 6C is an exemplary display screen 640 according to one embodimentof the invention. The display screen 640 includes the first portion 602and the second portion 604; however, in this embodiment, the firstportion 602 is larger than the second portion 604. The first portion 602includes a menu 642 having a list of selectable items. In thisembodiment, the menu 642 pertains to an Artists menu and thus theselectable items pertain to the various Artists that are available forselection. A user can scroll or navigate through the list and cause oneof the selectable items to be visually designated. The first portion 602can also include a header 608 can specify a name 610 (e.g., Artists) forthe menu and/or provide status information 612 (e.g., battery or otherstatus). The second portion 604 can present a graphical image 644. Inone embodiment, the graphical image 644 is contextually relevant. In oneimplementation, the graphical image 644 can pertain to a graphical imagethat is contextually relevant to the menu 642. For example, asillustrated in FIG. 6C, the menu 642 is denoted “Artists” and thus thegraphical image 644 can pertain to a music type digital media assetavailable to the portable electronic device.

FIG. 6D is an exemplary display screen 660 according to one embodimentof the invention. The display screen 660 in this embodiment is generallysimilar to the display screen 640 illustrated in FIG. 6C. However, inFIG. 6D, one of the selectable items (i.e., artists) from the menu 642has been visually designated 646. As a result, the graphical image 644′being displayed in the second portion 604 can be changed to becontextually relevant to the one of the selectable items that has beenvisually designated 646. For example, the graphical image 644′ canpertain to artwork for an album or song of the artist—“Air for All”.

FIG. 6E is an exemplary display screen 680 according to one embodimentof the invention. The display screen 680 in this embodiment is generallysimilar to the display screen 660 illustrated in FIG. 6D. However, inFIG. 6E, the graphical image 644″ is presented in a skewed manner. Asillustrated in FIG. 6E, the graphical image 644″ has a depth of fieldthat provides a three-dimensional (3D) effect. The degree of skewing orthe amount of depth of field being provided to the graphical image 644″can be predetermined, dynamically determined, or user determined. As theuser causes another of the selectable item to be visually designated646, the graphical image 644″ can be changed so as to remaincontextually relevant to the selectable item that is visually designated646.

In FIGS. 6A-6E, the size of the second portion 604 has a size that canbe the same or smaller than the size of the first portion 602. Asexamples, in some display screen layouts, the second portion 604 can beone-half, one-third or one-fourth of the total size (e.g., width) of thedisplay screen. In such cases, the movement and/or skewing noted abovecan assist in improving the amount of the graphical image that can bepresented (i.e., visible) in the second portion 604.

Additionally, it should be noted that in the FIGS. 6A-6E, the firstportion 602 can include a header 608 with a name 610 and a statusindicator 512. However, in contrast, the second portion 604 does notinclude such a header. Accordingly, in one embodiment, the secondportion 604 is able to maximize it vertical usage of a display by notincluding a header. With portable electronic devices, the display device(i.e., screen size) is often substantially limited so maximizingvertical usage is advantageous.

FIG. 7 is a flow diagram of a media collection presentation process 700according to one embodiment of the invention. The media collectionpresentation process 700 is, for example, performed by a portableelectronic device having a display device that can display variousdisplay screens when being operated.

The media collection presentation process 700 can display 702 a list ofmedia collection designators. A media collection is a group of mediaitems, such as an album, playlist and the like. The media collectiondesignators are textual and/or graphic designators for the mediacollections. For example, a media collection designator can be a namefor the collection and/or a graphical image (e.g., icon or thumbnailimage) for the collection. One of the media collection designators beingdisplayed can be visibly identified 704. For example, one of the mediacollection designators can be highlighted.

Next, a decision 706 can determine whether a user selection has beenmade with respect to the list of media collection designators beingdisplayed. The user selection, when made, operates to select one of themedia collections. When the decision 706 determines that a userselection has not been made, then a decision 708 can determine whetheranother user interface (UI) event has been requested. When the decision708 determines that another UI event has been requested, then otherprocessing 710 can be performed to carry out the other UI event. On theother hand, when the decision 708 determines that another UI event hasnot been received, then the media collection presentation process 700can return to repeat the blocks 704 and 706 to await a user selection.

Once the decision 706 determines that a user selection has been madefrom the list of media collection designators, a list of media itemdesignators within the selected media collection can be displayed 712.One of the media item designators being displayed in the list of mediaitem designators can be visually identified 714. In addition, concurrentwith the display of the list of media items, a graphic imagecorresponding to the selected media collection (or identified mediaitem) can be displayed 716 with a three-dimensional effect. Thethree-dimensional (3D) effect is not an actual 3D rendering of thegraphical image but instead a two-dimensional (2D) representation thatprovides a depth of field presentation. The three-dimensional effect canthus be computationally efficient yet still provides a depth of fieldpresentation.

Next, a decision 718 can determine whether a user selection has beenmade with respect to the list of media item designators. Here, the userselection of one of the media item designators operates to select amedia item. When the decision 718 determines that a user selection hasnot been received, a decision 720 can determine whether another UI eventhas been received. When the decision 720 determines that another UIevent has been received, the media collection presentation process 700can perform the other processing 710. On the other hand, when thedecision 720 determines that another UI event has not been received, themedia collection presentation process 700 can return to repeat theblocks 714 and 716 until a user selection has been received.

When the decision 718 determines that a user selection has beenreceived, the graphical image corresponding to the selected mediacollection can be displayed 722 without display of the list of mediaitem designators. For example, the graphical image corresponding to theselected media collection can be displayed 722 using the full screenarea of the display screen. Further, playback of the selected media itemcan be initiated 724. The graphical image corresponding to the selectedmedia collection can remain displayed 722 while the playback of theselected media item is on-going. In one embodiment, the graphical imagecan be manipulated during at least a portion of the playback 724. Forexample, the graphical image can be automatically rotated, skewed,panned or oscillated just prior to or during at least a portion of theplayback. Following the playback of the selected media item, the mediacollection presentation process 700 can end.

FIGS. 8A-8D are exemplary display screens that can be presentedaccording to certain embodiments of the invention. For example, one ormore of these exemplary display screens can be presented by the screenpresentation process 100 illustrated in FIG. 1, screen transitionprocess 200 illustrated in FIG. 2, media item presentation process 300illustrated in FIG. 3, media collection presentation process 700, oranother suitable process. However, these exemplary display screens areparticular well suited for presentation by the media collectionpresentation process 700.

FIG. 8A is an exemplary display screen 800 that presents list 802 ofmedia collection designators according to one embodiment of theinvention. The list 802 in this example includes designators for fourdifferent media collections. The designators for each media collectioninclude textual descriptors 804 including a name 806 and a number ofmedia items 808 (e.g., songs) within the associated media collection.The designators for each media collection can also include graphicaldescriptors 810. The graphical descriptors 810 are, for example,graphical images associated with the associated media collection. Forexample, if the media collections are albums, the graphical images canbe album artwork. As illustrated in FIG. 8A, an identified mediacollection designator 812 within the list 802 is visually distinguishedfrom the other media collection designators within the list 802. Forexample, the visual designation can be visually highlighting thecorresponding media collection designator. An identification identifier814 can be displayed with the identified media collection designator 812to signal the user that the identified media collection designator 812can be selected. The exemplary display screen 800 can also include acollection category 816 (e.g., artist) and a status indicator 818. Inthis example, the collection category 816 pertains to an artist (e.g.,“The Beatles”), and the status indicator 818 reflects battery status.Alternatively, the status indicator 818 can represent any statuscondition association with the portable electronic device, such asnetwork availability, alerts (email, calendar, etc.), data storageavailability, etc.

FIG. 8B is an exemplary display screen 840 that presents a list 842 ofmedia item designators and a graphical image 844 that is contextuallyrelevant according to one embodiment of the invention. As illustrated inFIG. 8B, within the list 842 one of the media item designators 846 isvisually distinguished from the other media item designators within thelist 842. For example, the visual designation can be visuallyhighlighting of the corresponding media item designator. The exemplarydisplay screen 840 can also include a media collection designator 848(e.g., name) and a status indicator 850. In this example, the mediacollection designator 848 pertains to a label or name (e.g., “Let ItBe”) for a particular media collection, and the status indicator 850reflects battery status. Alternatively, the status indicator 850 canrepresent any status condition association with the portable electronicdevice, such as network availability, alerts (email, calendar, etc.),data storage availability, etc. In effect, the display screen 840 hastwo portions (e.g., two panes or split screen). The first portionincludes the list 842 along with the media collection designator 848 andthe status indicator 850. The first portion can also be referred to as acard. The second portion includes the graphical image 844. In oneembodiment, and as illustrated in FIG. 8B, the graphical image 844 canbe displayed in a skewed manner. By skewing the graphical image 844, thegraphical image 844 is provided with a depth of field whereby the leftside of the image appears to be set back into the display. The skewingalso allows the graphical image 844 to be compacted to fit more of itsimage within the limited area of the second portion.

FIG. 8C is an exemplary display screen 860 of a graphical image duringplayback of a selected media item according to one embodiment of theinvention. The display screen 860 displays a graphical image 862 for aparticular media item (e.g., “Song 1”). The display screen 860 alsodisplays a title 864 for the particular media item and a mediacollection name 866 (e.g., album name). The exemplary display screen 860can also include an artist designator 868 and a status indicator 870. Inthis example, the artist designator 868 pertains to an artist name(e.g., “The Beatles”) associated with the particular media item, and thestatus indicator 870 reflects battery status. Alternatively, the statusindicator 870 can represent any status condition association with theportable electronic device, such as network availability, alerts (email,calendar, etc.), data storage availability, etc. In one embodiment, thegraphical image 862 can be displayed in a rotated or skewed fashion. Asillustrated in FIG. 8C, the graphical image 862 is displayed at an angleand the entire graphical image is not visible on the display.

In one implementation, the exemplary display screen 840 illustrated inFIG. 8B can represent a display screen that is presented followingselection of a media collection (e.g., “Let It Be”) from the exemplarydisplay screen 800 illustrated in FIG. 8A. In one implementation, theexemplary display screen 860 illustrated in FIG. 8C can represent adisplay screen that is presented following selection of a media item(“Song 1”) from the exemplary display screen 840 illustrated in FIG. 8B.The exemplary display screen 840 has a two portion (or a split screen)layout, while the exemplary display screens 800 and 860 have singleportion layouts. The exemplary display screen 800 has a list or menulayout, while the exemplary display screen has a playback layout.

FIG. 8D is an exemplary display screen 880 that presents a list 882 ofmedia item designators and a graphical image 884 that is contextuallyrelevant according to one embodiment of the invention. Here, in oneexample, the exemplary display screen 880 can follow from the exemplarydisplay screen 840 in response to a user input (e.g., UI event todisplay a next media collection). The next media collection is shown inthe list 802 of media collections illustrated by the exemplary displayscreen 800 of FIG. 8A. As illustrated in FIG. 8D, within the list 882one of the media item designators 886 is visually distinguished from theother media item designators within the list 882. For example, thevisual designation can be visually highlighting of the correspondingmedia item designator. The exemplary display screen 880 can also includea media collection designator 888 (e.g., name) and a status indicator890. In this example, the media collection designator 888 pertains to alabel or name (e.g., “Love”) for a particular media collection, and thestatus indicator 890 reflects battery status. Alternatively, the statusindicator 850 can represent any status condition association with theportable electronic device, such as network availability, alerts (email,calendar, etc.), data storage availability, etc. In effect, the displayscreen 880 has two portions (e.g., two panes or split screen). The firstportion includes the list 882 along with the media collection designator888 and the status indicator 890. The first portion can also be referredto as a card. The second portion includes the graphical image 884. Inone embodiment, and as illustrated in FIG. 8D, the graphical image 884can be displayed in a skewed manner. By skewing the graphical image 884,the graphical image 884 is provided with a depth of field whereby theleft side of the image appears to be set back into the display. Theskewing also allows the graphical image 884 to be compacted to fit moreof its image within the limited area of the second portion.

In various embodiments, implementations or examples discussed above, adisplay screen can have two portions (or a split screen) layout. In oneembodiment, one of the portions can display data in a skewed manner. Inanother embodiment, two of the portions can display data in a skewedmanner. The skewing imposed on one portion can be the opposite ofskewing imposed on another portion. For example, a display screen havingtwo portions that are both skewed could be useful for virtual flippingthrough photos or album artwork. In general, in a display screen havingtwo or more portions, any one or more of the portions can be skewed

The portable electronic device utilized herein can, for example,correspond to a computing device (e.g., personal computer), mobile phone(e.g., cellular phone), personal digital assistant (PDA), media player(e.g., music, videos, games, images), media storage device, camera,remote control, and/or the like. The electronic device may also be amulti-functional device that combine two or more of these devicefunctionalities into a single device. Examples of multi-functionaldevices can be found in U.S. Patent Application Publication No.20060197753, entitled “MULTI-FUNCTIONAL HAND-HELD DEVICE”, which isherein incorporated by reference.

An electronic device having a display screen often has a plurality ofdifferent display screens available for display. For example, a user caninteract with the electronic device to navigate through a hierarchy ofdisplay screens to access data (e.g., information or media playback) onthe electronic device.

Display screens can also be referred to as graphical user interfaces.The graphical user interfaces are presented on a display of anelectronic device. For example, the electronic device can be a mobilecomputing device, such as a handheld device (e.g., mobile telephone,portable media player, personal digital assistant).

According to one embodiment of the invention a display screen havingmultiple panes can adjust the respective sizes of the panes depending onuser interaction. In one implementation, if a user interacts with afirst pane, the first pane can be enlarged and a second pane can bereduced. For example, if a user identifies an item in a particular pane,then the particular pane can enlarge to provide a greater area forvisual presentation of at least the identified item. Here, in oneapproach, the particular pane can always enlarge or the particular panecan enlarge only if advantageous for the visual presentation of at leastthe identified item. When the multiple panes are transitioning todifferent sizes one or more transition effects (e.g., animation,cross-fade, Ken Burns effect, etc.) can be used.

FIG. 9A is a flow diagram of a display screen presentation process 900according to one embodiment of the invention. The display screenpresentation process 900 is, for example, performed by an electronicdevice having a display. The display screen presentation process 900operates to display a display screen on the display of the electronicdevice. The display screen is responsive to user interaction to alter orchange its presentation format.

The display screen presentation process 900 can initially display 902 adisplay screen with multiple panes using a default presentation. Apresentation is used to display a display screen. In the case of amulti-pane display screen, the default presentation can specify theattributes (e.g., size) for the multiple panes of the display screen.For example, the default presentation could be associated with a displayscreen having first and second panes of the same size.

Next, a decision 904 can determine whether a user interaction withrespect to the first pane has been received. The first pane can displayfirst data, and the second pane can display second data. The data beingdisplayed can vary but may include graphic (including images) and/ortext (including lists, menus or information). A user interaction withrespect to the first pane can be an identification or selection of someportion of the first data being displayed. When the decision 904determines that a user interaction with respect to the first pane hasbeen received, the first pane of the display screen can enlarge 906using an enlarged presentation. Here, the enlarged presentation operatesto enlarge the display area for at least a portion of the first pane.Typically, when the first pane is enlarged, the second pane is reducedsuch that the total screen display area is constant.

On the other hand, when the decision 904 determines that a userinteraction with respect to the first pane has not been received, adecision 908 determines whether a user interaction with respect to thesecond pane has been received. When the decision 908 determines that auser interaction with respect to the second pane has been received, thesecond pane of the display screen can enlarge 910 using an enlargedpresentation. Here, the enlarged presentation operates to enlarge thedisplay area for at least a portion of the second pane. Typically, whenthe second pane is enlarged, the first pane is reduced such that thetotal screen display area is constant.

Following the blocks 906 and 910, as well as following the decision 908when no user interaction with respect to the second pane has beenreceived, a decision 912 can determine whether a new display screen isto be displayed. User interaction can be a selection and cause asubsequent or next display screen to be displayed. For example, often aplurality of display screens are associated with a hierarchicalarrangement that facilitates navigation and selection of certain datafrom a larger set of data. Hence, a user can typically traverse ahierarchical arrangement of display screens by transitioning from onedisplay screen to another. When the decision 912 determines that a newdisplay screen is to be displayed, then the display screen presentationprocess 900 can return to repeat the block 902 and subsequent blocks forprocessing with respect to a new display screen. Alternatively, when thedecision 912 determines that a new display screen is not to bedisplayed, then the display screen presentation process 900 returns torepeat the decision 904 and subsequent blocks for continued processingwith respect to the current display screen.

One example of the display screen presentation process 900 is where thefirst data displayed in the first pane is a list (e.g., menu) ofselectable items, and the second data displayed in the second pane isdata contextually related to at least some portion of the first data.When the user interacts with the first pane to scroll or traverse thelist of selectable items and thus identify an item in the list, thefirst pane can be enlarged so that navigation and viewing of the firstpane is easier. Typically, when the first pane is enlarged, the secondpane is reduced. Additionally, the second data can dynamically adjust tobe contextually relevant to the selected item in the list displayed inthe first pane. In this example, the user can also interact with thesecond pane. Hence, when the user subsequently interacts with the secondpane, the second pane can be enlarged so that the second data is easierto view. Typically, when the second pane is enlarged, the second pane isreduced. Hence, in this example, the pane corresponding to userinteraction is enlarged while the other corresponding pane is madesmaller.

FIG. 9B is a flow diagram of a display screen presentation process 920according to one embodiment of the invention. The display screenpresentation process 920 is, for example, performed by an electronicdevice having a display. The display screen presentation process 920operates to display a display screen on the display of the electronicdevice. The display screen is responsive to user interaction to alter orchange its presentation format.

The display screen presentation process 920 can initially display 922 adisplay screen with multiple panes using a default presentation. Apresentation is used to display a display screen. In the case of amulti-pane display screen, the default presentation can specify theattributes (e.g., size) for the multiple panes of the display screen.For example, the default presentation could be associated with a displayscreen having first and second panes of the same size.

Next, a decision 924 can determine whether a user interaction withrespect to the first pane has been received. The first pane can displayfirst data, and the second pane can display second data. The data beingdisplayed can vary but may include graphic (including images) and/ortext (including lists, menus or information). A user interaction withrespect to the first pane can be an identification or selection of someportion of the first data being displayed. When the decision 924determines that a user interaction with respect to the first pane hasbeen received, the first pane of the display screen can enlarge 926using an enlarged presentation. Here, the enlarged presentation operatesto enlarge the display area for at least a portion of the first pane.Typically, when the first pane is enlarged, the second pane is reducedsuch that the total screen display area is constant. When the secondpane is reduced, the second data can be modified to better fit withinthe second pane which has a reduced size. The modification to the seconddata can include scaling, clipping, distorting or compressing. In oneimplementation, the second data is dynamically determined based on theuser interaction with the first pane. For example, the second data canbe contextually related to at least a portion of the first data in thefirst pane that is identified by the user interaction. It should also benoted that the second pane may not be receptive to any user interaction.When the decision 924 determines that a user interaction with respect tothe first pane has not been received, a decision 928 can determinewhether a time-out for user action has occurred. When the decision 928determines that there has been no user interaction with the first panefor a predetermined period of time, then the display screen beingdisplayed can return 930 to again present the display screen using thedefault presentation.

Following the blocks 926 and 930, as well as following the decision 928when no user interaction with respect to the second pane has beenreceived, a decision 932 can determine whether a new display screen isto be displayed. User interaction can be a selection and cause asubsequent or next display screen to be displayed. For example, often aplurality of display screens are associated with a hierarchicalarrangement that facilitates navigation and selection of certain datafrom a larger set of data. Hence, a user can typically traverse ahierarchical arrangement of display screens by transitioning from onedisplay screen to another. When the decision 932 determines that a newdisplay screen is to be displayed, then the display screen presentationprocess 900 can return to repeat the block 922 and subsequent blocks forprocessing with respect to a new display screen. Alternatively, when thedecision 932 determines that a new display screen is not to bedisplayed, then the display screen presentation process 920 returns torepeat the decision 924 and subsequent blocks for continued processingwith respect to the current display screen.

One example of the display screen presentation process 920 is where thefirst data displayed in the first pane is a list (e.g., menu) ofselectable items, and the second data displayed in the second pane isdata contextually related to at least some portion of the first data.When the user interacts with the first pane to scroll or traverse thelist of selectable items and thus identify an item in the list, thesecond data dynamically adjusts to be contextually relevant to theselected item in the list displayed in the first pane. Further, when thescrolling or traversing of the list in the first pane is beingperformed, the first pane is enlarged so that navigation and viewing ofthe first pane is easier. In some embodiments, after a lack of userinteraction with respect to the first pane for more than a predeterminedduration, the first pane can automatically return to the defaultpresentation.

FIGS. 9C and 9D are flow diagrams of a display screen presentationprocess 940 according to one embodiment of the invention. The displayscreen presentation process 940 is, for example, performed by anelectronic device having a display. The display screen presentationprocess 940 operates to display a display screen on the display of theelectronic device. The display screen is responsive to user interactionto alter or change its presentation.

The display screen presentation process 940 can initially display 942 adisplay screen with multiple panes using a default presentation. Apresentation is used to display a display screen. In the case of amulti-pane display screen, the default presentation can specify theattributes (e.g., size) for the multiple panes of the display screen.For example, the default presentation could be associated with a displayscreen having first and second panes of the same size.

Next, a decision 944 determines whether a user input with respect to thefirst pane has been received. It is assumed that the first pane displaysa menu having a plurality of selectable items. A user input with respectto the first pane can be a selection of one of the selectable itemsbeing displayed in the first pane. When the decision 944 determines thata user input with respect to the first pane has been received, adecision 946 can determine whether the user input corresponds to a menuitem selection. For example, the first pane of the display screen canpresent a plurality of selectable items of a menu. The decision 946determines whether the user input with respect to the first pane selectsone of the selectable items. When the decision 946 determines that aselectable item from the first pane has been selected, a next displayscreen can be displayed 948. Here, the selection of a selectable itemfrom the first pane can cause a subsequent or next display screen to bedisplayed 948. For example, often a plurality of display screens areassociated with a hierarchical arrangement that facilitates navigationand selection of certain data from a larger set of data. Hence, the usertypically traverses the hierarchical arrangement of display screens bytransitioning from one display screen to another.

On the other hand, when the decision 946 determines that the user inputwith respect to the first pane is not a menu item selection, user inputis assumed to be a menu item identification from the selectable items ofthe menu. For example, a menu item can be identified by highlighting themenu item (e.g., via a scrolling action). Hence, in response to the userinput, the display of the selectable menu items in the first pane can beupdated 950. Next, a decision 952 determines whether the identified menuitem warrants additional display area for its presentation. When thedecision 952 determines that the identified menu item does not warrantadditional display area, the display of selectable menu items in thefirst pane can be updated 954. By updating 954 the display of theselectable menu items in the first pane, the identified menu item can bedistinctively identified. For example, the identified menu item can bedistinctively identified by visually highlighting the identified menuitem.

On the other hand, when the decision 952 determines that the identifiedmenu item does warrant additional display area, the display of theselectable menu items in the first pane can be updated 956 using anenlarged presentation. The enlarged presentation operates to enlarge thedisplay area for at least a portion of the first pane. As one example,the entire display area for the first pane can be enlarged. As anotherexample, only a portion of the display area associated with theidentified menu item can be enlarged. Following the blocks 954 and 956,the display screen presentation process 940 returns to repeat thedecision 944 and subsequent blocks so that subsequent user inputs can besimilarly processed.

Additionally, when the decision 944 determines that a user input withrespect to the first pane has not been received, a decision 958determines whether an enlarged presentation is active. When the decision958 determines that an enlarged presentation is active, a decision 960determines whether a time-out for receiving user action has expired.When the decision 960 determines that a time-out for user action hasoccurred, then the display is updated 962 to again present the displayscreen using the default presentation. Further, when the decision 958determines that the enlarged presentation is not active, or even ifactive when the decision 960 determines that a time-out for user actionhas occurred, then the processing performed by the display screenpresentation process 940 operates to bypass the block 962. Following theblock 962 as well as following the decisions 958 and 960 when theenlarged presentation is not active or when time-out for receiving useraction has not occurred, the display screen presentation process 940 canreturn to repeat the decision 944 and subsequent blocks so thatsubsequent user inputs can be similarly processed.

FIGS. 10A-10C are exemplary display screens according to variousembodiments of the invention. These display screens have first andsecond panes that are used to display data. A display screen has afinite amount of area, and the display screen area is allocated betweenthe first and second panes. In one embodiment, at least a portion of oneof the panes of a display screen can be dynamically re-sized based onuser interaction with respect to data being displayed by the displayscreen.

FIG. 10A illustrates a display screen 1000 according to one embodimentof the invention. The display screen 1000 includes a first pane 1002 anda second pane 1004. The first pane 1002 can display a list of selectablemedia items, namely, media item A, media item B and media item C. Thesecond pane 1002 can display data contextually associated with the databeing displayed in the first pane 1002. In particular, as illustrated inFIG. 10A, the data being displayed in the second pane 1002 can includean image 1008 and text 1010 which pertain to the media item A. In thisembodiment, one of the media items being listed in the first pane 1006is entitled, labeled or described using a textual description which mayor may not exceed the width of the first pane as shown in FIG. 10A. Thedisplay screen 1000 illustrated in FIG. 10A can be considered a defaultpresentation.

FIG. 10B illustrates a display screen 1020 according to one embodimentof the invention. The display screen 1020 includes a first pane 1022 anda second pane 1024. The first pane 1022 can displays a list ofselectable media items, namely, media item A, media item B and mediaitem C. Here, a user has interacted with the first pane to select the“Media item C remix.” Hence, in this example, the label, title or otherdescription for the “Media item C remix” is larger than any of thelabels, titles or other descriptions displayed in the first pane 1002 ofthe display screen 1020. As a result, the display screen 1020 canallocate a greater portion of its display screen area to the first pane1022. Hence, as illustrated in FIG. 10B, the first pane 1022 has alarger size than the second pane 1024. With the enlarged first pane1022, the longer media description, namely, “media item C remix” can befully visible within the first pane 1022. However, as the first pane1022 gets larger, the second pane 1024 gets smaller. Since the size ofthe second pane 1024 is reduced as compared to the size of the secondportion 1004 illustrated in FIG. 10A, to present the same information inthe second portion 1024, in one embodiment, the second data can bereformatted, distorted, re-sized, scaled, repositioned, etc. so as topresent the second data within second pane 1024 having the reduced size.

The second pane 1024 can display data contextually associated with thedata being displayed in the first pane 1022. In particular, asillustrated in FIG. 10B, the second data being displayed in the secondpane 1024 can include an image 1028 and text 1030 which pertain to theselected item “Media item C remix” from the first pane 1022. As anexample, the image 1028 can represent a modified image that isreformatted, distorted, re-sized, scaled, repositioned as compared tothe image 1008 illustrated in FIG. 10A. The text 1030 can also becompressed or displayed in a smaller font so as to fit within the secondpane 1024 when having the reduced size.

The display screen 1020 illustrated in FIG. 10B can be considered anenlarged presentation. The enlarged presentation can be triggered byvarious situations. As one example, when user interaction with the firstpane 1022 operates to scroll through the displayed list of media items,the enlarged presentation format can be used. In the enlargedpresentation format, the width of the first portion is enlarged. Whenusing the enlarged presentation format, the first data displayed in thefirst pane 1022 can also be reformatted, distorted, re-sized, scaled,repositioned to enlarge the first data. As another example, when theuser identifies an item in the display list of item that can benefitfrom additional display area, such as illustrated in FIG. 10B, the firstpane can be enlarged for that item itself or for the entire first pane.

After being in the enlarged presentation, a display screen can return toa default presentation. FIG. 10C illustrates a display screen 1040 thatcan be presented following the display screen 1000 illustrated in FIG.10A or the display screen 1020 illustrated in FIG. 10B.

Also, the enlarged presentation can be applied for the first portion orthe second portion. In other words, whichever portion (e.g., pane) auser shows interest in can be enlarged for enhanced viewing. Userinteraction with the different potions of a display screen can be usedto determine user interest.

In another embodiment, if user interaction does not serve to determinecontextually relevant content to be displayed, then other contentavailable on the electronic device could be displayed, For example, theother content can be content on the electronic device that is randomlychosen,

According to another embodiment of the invention a display screen havingmultiple panes can adjust the respective sizes of the panes depending ondata to be presented in the display screen. The display screen is agraphical user interface that is displayed on a display (display device)of an electronic device, such as a mobile electronic device. In oneimplementation, if first data to be displayed in a first pane requiresor can benefit from an enlarged display region, the first pane can beenlarged and a second pane can be reduced. When the multiple panes aretransitioning to different sizes one or more transition effects (e.g.,animation, cross-fade, kens burn effect, etc.) can be used.

FIG. 11 is a flow diagram of a display screen presentation process 1100according to one embodiment of the invention. The display screenpresentation process 1100 is, for example, performed by an electronicdevice having a display. The display screen presentation process 1100operates to display a display screen on the display of the electronicdevice.

The display screen presentation process 1100 can initially identify 1102a display screen having multiple panes to be displayed. For example, thedisplay screen to be displayed can include a first pane and a secondpane. In addition, first data to be presented in the first pane of theidentified display screen can be identified 1104. After the first datahas been identified 1104, a portion of display screen area for thedisplay screen can be allocated 1106 to present the first pane of theidentified display screen. In one embodiment, the portion of the displayscreen area being allocated 1106 to the first pane of the identifieddisplay screen can be based on at least the first data to be presentedin the first pane. For example, if the first data requires a significantportion of the display screen area, the resulting display screen canallocate 1106 more of its display screen area to the first pane andtherefore less of its display screen area to the second pane. After theportion of the display screen area for the display screen is allocated1106, the identified display screen can be presented 1108 on the displayassociated with the electronic device performing the display screenpresentation process 1100. In presenting 1108 the identified displayscreen, at least a portion of the first data is presented in the firstpane.

FIG. 12 is a flow diagram of a display screen presentation process 1200according to one embodiment of the invention. The display screenpresentation process 1200 is, for example, performed by an electronicdevice having a display. The display screen presentation process 900operates to display a display screen on the display of the electronicdevice.

The display screen presentation process 1200 can initially identify 1202a display screen having multiple panes to be displayed. Additionally,first data to be presented in a first pane of the display screen can beidentified 1204, and second data to be presented in a second pane of thedisplay screen can be identified 1206. In one implementation, the seconddata to be presented in the second pane can be based on the first datato be presented in the first pane. For an example, in the second datacan be contextually related to the first data generally or a specificportion (e.g., item) of the first data.

Next, a first portion of a display screen area can be allocated 1208 tothe first pane based on at least the first data. In other words, theportion of the display screen area being allocated 1208 to the firstpane can be dependent on the first data. In addition, a second portionof the display screen area can be allocated 1210 to the second pane.When the display screen has only first and second panes, the secondportion can also be also be considered a remaining portion. Thereafter,the display screen can be presented 1212 with the first data displayedin the first pane and the second data displayed in the second pane.

In one embodiment, since the display screen area allocated to the secondpane can be limited, the amount, format or arrangement by which thesecond data is displayed in the second pane can also vary. In thismanner, the second data can be adapted to the available display screenarea for the second pane. The adaptation of the second data can, forexample, reformat, distort, re-size, scale, reposition, etc. the seconddata for display in the limited area of the second pane.

FIG. 13A is a flow diagram of a display screen presentation process 1300according to one embodiment of the invention. The display screenpresentation process 1300 is, for example, performed by an electronicdevice having a display. The display screen presentation process 1300operates to display a multi-pane display screen on the display of theelectronic device.

The display screen presentation process 1310 can initially identify 1302a multi-pane display screen to be presented. Next, first data to bepresented in a first pane of the multi-pane display screen can beidentified 1304. In addition, second data to be presented in a secondpane of the multi-pane display screen can be identified 1306. A displayformat for the multi-pane display screen can be determined 1308 based onat least the first data. The display format can alternatively bedetermined based on at least the first data and the second data.Further, the display format being determined can be dynamically computed(e.g., as data is identified for display) (i.e., dynamic format) orchosen from a plurality of predetermined formats (i.e., static format).Thereafter, the multi-pane display screen can be presented 1310 on thedisplay device in accordance with the determined display format.

FIGS. 13B-13D are exemplary display screen formats for a multi-panedisplay screen according to certain embodiments of the invention. FIG.13B illustrates a display screen format have a balance split-panedesign. FIG. 13C illustrates a display screen format with an unbalancedsplit-pane design. In the unbalanced split-pane design, a primary paneis allocated most of the area of the display screen, and a secondarypane is allocated a remaining portion of the area of the display screen.FIG. 13D also illustrates a display screen format with an unbalancedsplit-pane design. The panes of the unbalanced split-pane design in FIG.13D is similar to the unbalanced split-pane design in FIG. 13C. However,the secondary pane the unbalanced split-pane design in FIG. 13D presentsdata with a perspective distortion to provide a 3D-like effect.

In general, it should be understood that the various display screenformats for split-pane designs can have limits on how large the primarypane can get and/or how small the secondary pane can get. For example,one exemplary limitation could be that the primary pane cannot exceedseventy-five (75%) of the display screen area. Also, it should also beunderstood that in the event that a pane is not large enough tosimultaneously present it corresponding data, then additional techniquescan be utilized to enable other portions of the corresponding data to bedisplayed. For example, to view additional characters that describe amedia item, horizontal scrolling of the descriptive information for themedia item can be utilized.

FIGS. 14A-14D are exemplary display screens according to variousembodiments of the invention. These display screens have first andsecond panes that are used to display data. A display screen has afinite amount of area, and the display screen area is allocated betweenthe first and second panes. In one environment, at least one of thepanes of a display screen is sized or determined based on the data to bepresented in that pane. The size of at least one of the panes can bepredetermined for a given display screen or can be determineddynamically dependent on the data being displayed by the display screen.

FIG. 14A illustrates a display screen 1400 according to one embodimentof the invention. The display screen 1400 has a multi-pane format thatincludes a first pane 1402 and a second pane 1404. The first pane 1402displays a list of selectable items, namely, item A, item B and item C.The second pane 1404 can display data contextually associated with thedata being displayed in the first pane 1402. In one implementation, thedata displayed in the second pane 1404 can include an image 1406 andtext 1408. For example, the image 1406 and the text 1408 can beassociated with at least one of the items being displayed in the firstpane 1402.

FIG. 14B illustrates a display screen 1420 according to anotherembodiment of the invention. The display screen 1420 has anothermulti-pane format that includes a first pane 1422 and a second pane1424. The first pane 1420 displays a list of selectable media items,namely, media item A, media item B and media item C. The second pane1424 can display data contextually associated with the data beingdisplayed in the first pane 1420. In particular, as illustrated in FIG.14B, the data being displayed in the second pane 1424 can include animage 1426 and text 1428. In this embodiment, the media items beinglisted in the first pane 1422 are entitled, labeled or described usingtextual descriptions which are longer than those utilized in FIG. 14A.As a result, the display screen 1420 has a greater portion of itsdisplay screen area allocated to the first pane 1422. Hence, asillustrated in FIG. 14B, the first pane 1422 has a larger size than thesecond pane 1424. With the larger first pane 1422, the longer mediadescriptions can be better displayed for the various media items.However, since the first pane 1422 is larger, the second pane 1424 issmaller. Since the size of the second pane 1424 is reduced as comparedto the size of the second portion 1404 illustrated in FIG. 14A, topresent the same information in the second portion 1424, in oneembodiment, the data can be reformatted, distorted, re-sized, scaled,repositioned, etc. so as to present the data within second pane 1424having the reduced size. As an example, the image 1426 can represent adistorted image that is horizontally clipped, compressed or distorted ascompared to the image 1406 illustrated in FIG. 14A. The text 1428 canalso be scaled, compressed or displayed in a smaller font so as to fitwithin the second pane 1424 having a reduced size. Alternatively oradditionally, the amount of text 1428 to be displayed in the second pane1424 can be reduced so that it fits within the reduced size.

FIG. 14C illustrates a display screen 1440 according to still anotherembodiment of the invention. The display screen 1440 includes a firstpane 1442 and a second pane 1444. The first pane 1442 is similar to thefirst pane 1422 illustrated in FIG. 14B. However, the second pane 1444displays the data for the second pane 1444 in a different arrangement ascompared to the display of data within the second pane 1424 illustratedin FIG. 14B. The arrangement utilized to display the data in the secondpane 1444 presents a smaller image 1446 as well as text 1448 in avertical configuration. As an example, the text 1448 may not need to becompressed, modified or reduced but the image 1446 can be scaled down toa smaller size to easily fit within the available space in the secondpane 1444.

FIG. 14D illustrates a display screen 1460 according to still anotherembodiment of the invention. The display screen 1460 includes a firstpane 1462 and a second pane 1464. The first pane 1420 displays a list ofselectable media items, namely, media item A, media item B and mediaitem C remix. In this embodiment, the label, title or other descriptionfor the media item C remix is larger than any of the labels, titles orother descriptions displayed in the first pane 1422 of the displayscreen 1420 illustrated in FIG. 14B. The second pane 1464 can displaydata contextually associated with the data being displayed in the firstpane 1460. In particular, as illustrated in FIG. 14D, the data beingdisplayed in the second pane 1464 can include an image 1466 and text1468. In this embodiment, one of the media items being listed in thefirst pane 1462 is entitled, labeled or described using a textualdescription is then longer than those utilized in FIG. 14B. As a result,the display screen 1460 can allocate a greater portion of its displayscreen area to the first pane 1462. Hence, as illustrated in FIG. 14D,the first pane 1462 has a larger size than the second pane 1424. Thesize of the first pane 1462 is larger than the size of the second pane1424 illustrated in FIG. 14B. With the enlarged first pane 1462, thelonger media description, namely, “media item C remix” can be displayedsuch that it is fully visible in the first pane 1462 for the variousmedia items. However, as the first pane 1462 gets larger, the secondpane 1464 can get smaller. Since the size of the second pane 1464 isfurther reduced as compared to the size of the second portion 1424illustrated in FIG. 14B, to present the same information in the secondportion 1464, in one embodiment, the data can be reformatted, distorted,re-sized, scaled, repositioned, etc. so as to present the data withinsecond pane 1464 having the reduced size. As an example, the image 1466can represent a modified image that is scaled, clipped, compressed ordistorted as compared to the image 1406 illustrated in FIG. 14A. Thetext 1468 can also be scaled, compressed or displayed in a smaller fontthan so as to fit within the second pane 1464 having a reduced size.Alternatively or additionally, the amount of text 1468 to be displayedin the second pane 1464 can be reduced so that it fits within thereduced size.

According to another embodiment of the invention a display screen havingmultiple panes can permit user interaction with a first pane anddynamically cause contextually related information to be presented in asecond pane. The display screen is typically a graphical user interfacethat is displayed on a display of an electronic device, such as a mobileelectronic device. For example, a user can identify a selectable itemfrom a list of selectable items presented in the first pane, and inresponse to the identification, information contextually related to theidentified item can be presented in the second pane. In the event thatthe electronic device does not currently have adequate informationavailable concerning the identified media item, the presentation ofcontent in the second pane can gracefully degrade. For example, whenadequate information is unavailable, the presentation of content in thesecond pane can use basic contextual information (if available) ordefault information.

FIG. 15 is a flow diagram of a display screen presentation process 1500according to one embodiment of the invention. The display screenpresentation process 1500 can be performed by an electronic devicehaving a display screen.

The display screen presentation process 1500 can initially present 1502first and second panes of a multi-pane display screen. In the firstpane, a list of selectable items can be displayed 1504. In the secondpane, initial content can be displayed 1506. The initial content can bepredetermined content for the second pane of the display screen or couldrepresent any of the contextual content discussed below.

A decision 1508 can then determine whether one of the selectable itemsdisplayed in the first pane have been identified by user action.Typically, a user can interact with the electronic device to causeidentification of one of the selectable items being displayed in thefirst pane. For example, the user can scroll through the selectableitems whereby a referenced selectable item is identified by visual meanssuch as highlighting.

When the decision 1508 determines that the user has identified one ofthe selectable items from the first pane, a decision 1510 can determinewhether contextual content is available. The contextual content refersto content (i.e., data) that is contextually related to the identifiedone of the selectable items. When the decision 1510 determines thatcontextual content pertaining to the identified one of the selectableitems is not available, default content is displayed 1512 in the secondpane. Next, a decision 1514 can determine whether the display screenpresentation process 1500 should continue or end. When the decision 1514determines that the display screen presentation process 1500 shouldcontinue, the display screen presentation process 1500 can return torepeat the decision 1508 and subsequent blocks in the display screenpresentation process 1500. Alternatively, the decision 1514 candetermine that the display screen presentation process 1500 should end.As an example, the display screen presentation process 1500 would endwhen a user selection is made that causes a next display screen to bedisplayed. The next display screen may or may not be a multi-panedisplay screen.

Alternatively, when the decision 1510 determines that contextual contentpertaining to the identified one of the selectable items is available,available contextual content can be retrieved 1516. The availablecontextual content can be fully available or partially available. Forexample, in one implementation, if all the normally stored contentresides locally in the electronic device, then the contextual content isfully available; however, if only part of all the normally storedcontent resides locally in the electronic device, then the contextualcontent is only partially available. In one implementation, theelectronic device receives content from an external source wirelessly orvia a wired connection. For example, the electronic device can receivecontent by having its content synchronized with content on a hostcomputer. As another example, the electronic device can receive contentfrom a wireless network. In some circumstances the electronic device mayonly store part of the contextual content for one or more of theselectable items. Contextual content can also be available to theelectronic device if the electronic device can at such time access thecontent from another electronic device via a data bus or a networkconnection.

After the available contextual content is retrieved 1516, a decision1518 can determine whether only partial contextual content is available.If the decision 1518 determines that full contextual content isavailable, then full contextual content can be displayed 1520 in thesecond pane. On the other hand, if the decision 1518 determines thatonly partial contextual content is available, then base contextualcontent can be displayed 1522 in the second pane. The base contextualcontent represents limited contextual content. Following the blocks 1520and 1522, the display screen presentation process 1500 can perform thedecision 1514 to determine whether the display screen presentationprocess 1500 should continue or end.

As an example, when the selectable items in the first pane pertain toalbums of audios tracks, full contextual content for an album caninclude a plurality of: title, artist, image (e.g., artwork), genre,track listing, rating, label, copyright, release date, play counts, etc.The full contextual content might also provide ancillary informationsuch as recommendations to other media items, reviews, etc. Basiccontextual content for the album would, for example, include title andartist.

In one embodiment, the contextual content being displayed in the secondpane can be automatically updated. Hence, if the needed contextualcontent subsequently becomes available to the electronic device, thenthe now available contextual content can be displayed in the secondpane, provided that the previously identified one of the selectableitems from the first pane remains the same. As one example, if thesecond pane displays the default content, the second pane can later beupgraded to the base content or the full content. As another example, ifthe second pane displays the base content, the second pane can beupgraded to the full content.

The initial content can be some predetermined content that is guaranteedto be available. The initial content can subsequently be replaced by thedefault content, the base contextual content or the full contextualcontent.

FIGS. 16A-16C are exemplary screen displays according to variousembodiments of the invention. These display screens have first andsecond panes that are used to display data. In one embodiment, one panedisplays a list of selectable items, and the second pane displaysinformation that is contextually related to an item displayed in thefirst pane.

FIG. 16A illustrates a display screen 1600 according to one embodimentof the invention. The display screen 1600 includes a first pane 1602 anda second pane 1604. The first pane 1602 can displays a list ofselectable media items, namely, media item A, media item B and mediaitem C. The second pane 1602 can display data contextually associatedwith the data being displayed in the first pane 1602. In particular, asillustrated in FIG. 16A, the data being displayed in the second pane1602 can include an image 1608 and media attributes 1610 which pertainto the media item A. The image 1608 can pertain to artwork associatedwith media item A. The media attributes 1610 can, for example, include atitle, artist, genre and rating. In this embodiment, the second pane1604 can be considered to present full contextual content.

FIG. 16B illustrates a display screen 1620 according to one embodimentof the invention. The display screen 1620 includes the first pane 1602and the second pane 1604 as in the display screen 1600 illustrated inFIG. 16A. However, in this embodiment, the second pane 1604 of thedisplay screen 1620 displays only basic contextual content. Inparticular, as illustrated in FIG. 16B, the data being displayed in thesecond pane 1602 can include minimal media attributes 1622 which pertainto the media item A. The media attributes 1622 can, for example, includea title and artist. In this embodiment, the second pane 1604 can beconsidered to present basic contextual content.

FIG. 16C illustrates a display screen 1640 according to one embodimentof the invention. The display screen 1640 includes the first pane 1602and the second pane 1604 as in the display screen 1600 illustrated inFIG. 16A and the display screen 1620 illustrated in FIG. 16B. However,in this embodiment, the second pane 1604 of the display screen 1640displays default content 1624. The default content 1624 is used whencontextual content is unavailable. For example, the default content 1624can pertain to a logo. As other example, the default content 1624 caninclude device information, manufacturer information, advertisements,random available content, indication of unavailable content, etc.

Additional detail on transitioning and various other aspects ofgraphical user interfaces can be found in the following: (i) U.S. patentapplication Ser. No. 11/899,144, filed Sep. 4, 2007 and entitled “IMAGEANIMATION WITH TRANSITIONAL IMAGES,” which is hereby incorporated hereinby reference for all purposes; (ii) U.S. patent application Ser. No.11/899,033, filed Sep. 4, 2007 and entitled “ANTI-ALIASING OF AGRAPHICAL OBJECT,” now U.S. Pat. No. 8,294,730, which is herebyincorporated herein by reference for all purposes; and (iii) U.S. patentapplication Ser. No. 11/899,024, filed Sep. 4, 2007 and entitled “USERINTERFACE ELEMENTS CLONING AND TRANSITIONS,” now U.S. Pat. No.7,917,861, which is hereby incorporated herein by reference for allpurposes.

The portable electronic device utilized herein can, for example,correspond to a computing device (e.g., personal computer), mobile phone(e.g., cellular phone), personal digital assistant (PDA), media player(e.g., music, videos, games, images), media storage device, camera,remote control, and/or the like. The electronic device may also be amulti-functional device that combine two or more of these devicefunctionalities into a single device. Examples of multi-functionaldevices can be found in U.S. Patent Application Publication No.20060197753, entitled “MULTI-FUNCTIONAL HAND-HELD DEVICE”, which isherein incorporated by reference.

FIG. 17 is a block diagram of a mobile multi-function device 1700according to one embodiment of the invention. The mobile multi-functiondevice 1700 can include the circuitry of a portable electronic devicethat can perform the operations described above. The mobilemulti-function device 1700 includes hardware and software components toprovide at least two functions, namely, a media playback function(including display screen/menu presentations) and a wireless voicecommunications function. When providing media playback, the mobilemulti-function device 1700 can operate as a media player capable ofplaying (including displaying) media items. The media items can, forexample, pertain to audio items (e.g., audio files or songs), videos(e.g., movies) or images (e.g., photos). When providing wireless voicecommunications, the mobile multi-function device 1700 can operate as amobile telephone (e.g., cellular phone).

The mobile multi-function device 1700 includes a processor 1702 thatpertains to a microprocessor or controller for controlling the overalloperation of the mobile multi-function device 1700. The mobilemulti-function device 1700 stores media data pertaining to media itemsin a file system 1704 and a cache 1706. In one embodiment, the filesystem 1704 is implemented by a storage disk or a plurality of disks. Inanother embodiment, the file system 1704 is implemented by EEPROM orFlash type memory. The file system 1704 typically provides high capacitystorage capability for the mobile multi-function device 1700. However,because the access time to the file system 1704 can be relatively slow,the mobile multi-function device 1700 can also include a cache 1706. Thecache 1706 is, for example, Random-Access Memory (RAM) provided bysemiconductor memory. The relative access time to the cache 1706 issubstantially shorter than for the file system 1704. However, the cache1706 does not have the large storage capacity of the file system 1704.Further, the file system 1704, when active, consumes more power thandoes the cache 1706. The power consumption is often a concern when themobile multi-function device 1700 is a portable mobile multi-functiondevice that is powered by a battery 1724. The mobile multi-functiondevice 1700 also includes a RAM 1720 and a Read-Only Memory (ROM) 1722.The ROM 1722 can store programs, utilities or processes to be executedin a non-volatile manner. The ROM 1722 can be implemented by an EEPROMor Flash type memory so as to provide writable non-volatile datastorage. The RAM 1720 provides volatile data storage, such as for thecache 1706.

In one embodiment, to support wireless voice communications, the mobilemulti-function device 1700 includes a transceiver 1726 and a SIM card1728. The transceiver 1726 supports wireless communication with awireless network (such as a wireless cellular network). The SIM card1728 includes an identifier (e.g., SIM identifier) can be used by themobile multi-function device 1700 to gain access and utilize thewireless network. In other embodiments, a SIM card 1728 is not utilized.

The mobile multi-function device 1700 also includes a user input device1708 that allows a user of the mobile multi-function device 1700 tointeract with the mobile multi-function device 1700. For example, theuser input device 1708 can take a variety of forms, such as a button,keypad, dial, etc. Still further, the mobile multi-function device 1700includes a display 1710 (screen display) that can be controlled by theprocessor 1702 to display information to the user. A data bus 1711 canfacilitate data transfer between at least the file system 1704, thecache 1706, the processor 1702, and the CODEC 1712.

In one embodiment, the mobile multi-function device 1700 serves to storea plurality of media items (e.g., songs) in the file system 1704. When auser desires to have the mobile multi-function device play a particularmedia item, a list of available media items is displayed on the display1710. Then, using the user input device 1708, a user can select one ofthe available media items. The processor 1702, upon receiving aselection of a particular media item, supplies the media data (e.g.,audio file) for the particular media item to a coder/decoder (CODEC)1712. The CODEC 1712 then produces analog output signals for a speaker1714. The speaker 1714 can be a speaker internal to the mobilemulti-function device 1700 or external to the mobile multi-functiondevice 1700. For example, headphones or earphones that connect to themobile multi-function device 1700 would be considered an externalspeaker.

The mobile multi-function device 1700 also includes a bus interface 1716that couples to a data link 1718. The data link 1718 allows the mobilemulti-function device 1700 to couple to a host device (e.g., hostcomputer or power source). The data link 1718 can also provide power tothe mobile multi-function device 1700.

The portable electronic device utilized herein can further be ahand-held electronic device. The term hand-held generally means that theelectronic device has a form factor that is small enough to becomfortably held in one hand. A hand-held electronic device may bedirected at one-handed operation or two-handed operation. In one-handedoperation, a single hand is used to both support the device as well asto perform operations with the user interface during use. In two-handedoperation, one hand is used to support the device while the other handperforms operations with a user interface during use or alternativelyboth hands support the device as well as perform operations during use.In some cases, the hand-held electronic device is sized for placementinto a pocket of the user. By being pocket-sized, the user does not haveto directly carry the device and therefore the device can be takenalmost anywhere the user travels (e.g., the user is not limited bycarrying a large, bulky and often heavy device).

The digital media assets (i.e., digital media items) can pertain tovideo items (e.g., video files or movies), audio items (e.g., audiofiles or audio tracks, such as for songs (music) or audiobooks), orimage items (e.g., photos). The digital media assets can also include orbe supplemented by text or multimedia files.

The various aspects, features, embodiments or implementations of theinvention described above can be used alone or in various combinations.

The invention is preferably implemented by software, hardware, or acombination of hardware and software. The invention can also be embodiedas computer readable code on a computer readable medium. The computerreadable medium is any data storage device that can store data which canthereafter be read by a computer system. Examples of the computerreadable medium generally include read-only memory and random-accessmemory. More specific examples of computer readable medium are tangibleand include Flash memory, EEPROM memory, memory card, CD-ROM, DVD, harddrive, magnetic tape, and optical data storage device. The computerreadable medium can also be distributed over network-coupled computersystems so that the computer readable code is stored and executed in adistributed fashion.

The advantages of the invention are numerous. Different aspects,embodiments or implementations may, but need not, yield one or more ofthe following advantages. One advantage of the invention is that limitedsize display screens are able to be used efficiently and effectively.Another advantage of the invention is that multi-pane display screenscan be used to present contextually relevant information. For example,contextually relevant information can be automatically presented on aportion of a display screen while also displaying a list of selectableitems. Further, as user interacts with the list, the contextuallyrelevant information being presented can dynamically update to remaincontextually relevant. Another advantage of the invention is that panesof multi-pane display screens can dynamically adapt their sizes inaccordance with user interaction or characteristics of data beingdisplayed. Still another advantage of the invention is that contextuallyrelevant information can be displayed in a modified manner to produce athree-dimensional effect which is not only a display area saver but alsovisually elegant.

The many features and advantages of the present invention are apparentfrom the written description. Further, since numerous modifications andchanges will readily occur to those skilled in the art, the inventionshould not be limited to the exact construction and operation asillustrated and described. Hence, all suitable modifications andequivalents may be resorted to as falling within the scope of theinvention.

What is claimed is:
 1. A computer-implemented method, comprising:displaying, on a computing device, a window that includes a selectionpane and a presentation pane, the selection pane including one or moreselectable items; receiving input corresponding to a selection of aselectable item; in response to receiving the input corresponding to theselection of the selectable item, replacing the selection pane with anew selection pane, wherein replacing the selection pane with the newselection pane includes ceasing to display the selection pane anddisplaying the new selection pane in an area of the window that waspreviously occupied by the selection pane; displaying in the newselection pane one or more new selectable items that are based upon theselection of the selectable item; determining whether the new selectionpane needs to be resized; in accordance with a determination that thenew selection pane needs to be resized, resizing the new selection pane;determining whether content contextually related to the selectable itemis available; retrieving contextually related content related to theselectable item; and dynamically presenting the retrieved contextuallyrelated content in the presentation pane.
 2. The method of claim 1,wherein replacing the selection pane with the new selection paneincludes an animation.
 3. The method of claim 2, wherein the animationincludes sliding the selection pane out of the window while sliding thenew selection pane into the window.
 4. The method of claim 1, whereinthe computing device is a mobile device.
 5. The method of claim 1,wherein the resizing is pre-determined.
 6. The method of claim 1,further comprising: determining an amount of the window that is occupiedby the selection pane; and determining an amount of the window that isneeded to display the one or more new selectable items, wherein when theamount of the window that is needed to display the one or more newselectable items is greater than the amount of the window that isoccupied by the selection pane, the new selection pane is resized. 7.The method of claim 1, further comprising: determining whether the newselection pane is large enough to display the one or more new selectableitems; and presenting an alternate display of the one or more newselectable items when the new selection pane is not large enough todisplay the one or more new selectable items.
 8. The method of claim 1,further comprising: determining that only a portion of the contextuallyrelated content is available; and automatically updating thecontextually related content when the contextually related contentsubsequently becomes available.
 9. The method of claim 1, furthercomprising: determining a threshold value corresponding to a size of thenew selection pane; and determining whether the size of the newselection pane exceeds the threshold value, wherein when the size of thenew selection pane exceeds the threshold value, the new selection paneneeds to be resized.
 10. The method of claim 1, wherein dynamicallypresenting the retrieved contextually related content includesdetermining whether the presentation pane needs to be modified and inaccordance with a determination that the presentation pane needs to bemodified, resizing the presentation pane concurrently with resizing thenew selection pane.
 11. The method of claim 1, further comprising:determining that the contextually related content is unavailable; andpresenting default content in the presentation pane.
 12. The method ofclaim 1, wherein: dynamically presenting the retrieved contextuallyrelated content in the presentation pane includes resizing thepresentation pane; and resizing the new selection pane and resizing thepresentation pane are performed in response to receiving the inputcorresponding to the selection of the selectable item.
 13. Acomputer-implemented system, comprising: one or more data processors;and one or more non-transitory computer-readable storage mediacontaining instructions configured to cause the one or more processorsto perform operations including: displaying a window that includes aselection pane and a presentation pane, the selection pane including oneor more selectable items; receiving input corresponding to a selectionof a selectable item; in response to receiving the input correspondingto the selection of the selectable item, replacing the selection panewith a new selection pane, wherein replacing the selection pane with thenew selection pane includes ceasing to display the selection pane anddisplaying the new selection pane in an area of the window that waspreviously occupied by the selection pane; displaying in the newselection pane one or more new selectable items that are based upon theselection of the selectable item; determining whether the new selectionpane needs to be resized; in accordance with a determination that thenew selection pane needs to be resized, resizing the new selection pane;determining whether content contextually related to the selectable itemis available; retrieving contextually related content related to theselectable item; and dynamically presenting the retrieved contextuallyrelated content in the presentation pane.
 14. The system of claim 13,wherein replacing the selection pane with the new selection paneincludes an animation.
 15. The system of claim 14, wherein the animationincludes sliding the selection pane out of the window while sliding thenew selection pane into the window.
 16. The system of claim 13, whereinthe computing device is a mobile device.
 17. The system of claim 13,wherein the resizing is pre-determined.
 18. The system of claim 13,further comprising instructions configured to cause the one or moreprocessors to perform operations including: determining an amount of thewindow that is occupied by the selection pane; and determining an amountof the window that is needed to display the one or more new selectableitems, wherein when the amount of the window that is needed to displaythe one or more new selectable items is greater than the amount of thewindow that is occupied by the selection pane, the new selection pane isresized.
 19. The system of claim 13, further comprising instructionsconfigured to cause the one or more processors to perform operationsincluding: determining whether the new selection pane is large enough todisplay the one or more new selectable items; and presenting analternate display of the one or more new selectable items when the newselection pane is not large enough to display the one or more newselectable items.
 20. The system of claim 13, further comprisinginstructions configured to cause the one or more processors to performoperations including: determining that only a portion of thecontextually related content is available; and automatically updatingthe contextually related content when the contextually related contentsubsequently becomes available.
 21. The system of claim 13, furthercomprising instructions configured to cause the one or more processorsto perform operations including: determining a threshold valuecorresponding to a size of the new selection pane; and determiningwhether the size of the new selection pane exceeds the threshold value,wherein when the size of the new selection pane exceeds the thresholdvalue, the new selection pane needs to be resized.
 22. The system ofclaim 13, wherein dynamically presenting the retrieved contextuallyrelated content includes determining whether the presentation pane needsto be modified and in accordance with a determination that thepresentation pane needs to be modified, resizing the presentation paneconcurrently with resizing the new selection pane.
 23. The system ofclaim 13, further comprising instructions configured to cause the one ormore processors to perform operations including: determining that thecontextually related content is unavailable; and presenting defaultcontent in the presentation pane.
 24. The system of claim 13, wherein:dynamically presenting the retrieved contextually related content in thepresentation pane includes resizing the presentation pane; and resizingthe new selection pane and resizing the presentation pane are performedin response to receiving the input corresponding to the selection of theselectable item.
 25. A computer-program product, tangibly embodied in anon-transitory machine readable storage medium, including instructionsconfigured to cause a data processing apparatus to: display a windowthat includes a selection pane and a presentation pane, the selectionpane including one or more selectable items; receive input correspondingto a selection of a selectable item; in response to receiving the inputcorresponding to the selection of the selectable item, replace theselection pane with a new selection pane, wherein replacing theselection pane with the new selection pane includes ceasing to displaythe selection pane and displaying the new selection pane in an area ofthe window that was previously occupied by the selection pane; displayin the new selection pane one or more new selectable items that arebased upon the selection of the selectable item; determine whether thenew selection pane needs to be resized; in accordance with adetermination that the new selection pane needs to be resized, resizethe new selection pane; determine whether content contextually relatedto the selectable item is available; retrieve contextually relatedcontent related to the selectable item; and dynamically present theretrieved contextually related content in the presentation pane.
 26. Thecomputer-program product of claim 25, wherein replacing the selectionpane with the new selection pane includes an animation.
 27. Thecomputer-program product of claim 26, wherein the animation includessliding the selection pane out of the window while sliding the newselection pane into the window.
 28. The computer-program product ofclaim 25, wherein the computing device is a mobile device.
 29. Thecomputer-program product of claim 25, wherein the resizing ispre-determined.
 30. The computer-program product of claim 25, furthercomprising instructions configured to cause the data processingapparatus to: determine an amount of the window that is occupied by theselection pane; and determine an amount of the window that is needed todisplay the one or more new selectable items, wherein when the amount ofthe window that is needed to display the one or more new selectableitems is greater than the amount of the window that is occupied by theselection pane, the new selection pane is resized.
 31. Thecomputer-program product of claim 25, further comprising instructionsconfigured to cause the data processing apparatus to: determine whetherthe new selection pane is large enough to display the one or more newselectable items; and present an alternate display of the one or morenew selectable items when the new selection pane is not large enough topresent the one or more new selectable items.
 32. The computer-programproduct of claim 25, further comprising instructions configured to causethe data processing apparatus to: determine that only a portion of thecontextually related content is available; and automatically update thecontextually related content when the contextually related contentsubsequently becomes available.
 33. The computer-program product ofclaim 25, further comprising instructions configured to cause the dataprocessing apparatus to: determine a threshold value corresponding to asize of the new selection pane; and determine whether the size of thenew selection pane exceeds the threshold value, wherein when the size ofthe new selection pane exceeds the threshold value, the new selectionpane needs to be resized.
 34. The computer-program product of claim 25,wherein dynamically presenting the retrieved contextually relatedcontent includes determining whether the presentation pane needs to bemodified and in accordance with a determination that the presentationpane needs to be modified, resizing the presentation pane concurrentlywith resizing the new selection pane.
 35. The computer-program productof claim 25, further comprising instructions configured to cause thedata processing apparatus to: determine that the contextually relatedcontent is unavailable; and present default content in the presentationpane.
 36. The computer-program product of claim 25, wherein: dynamicallypresenting the retrieved contextually related content in thepresentation pane includes resizing the presentation pane; and resizingthe new selection pane and resizing the presentation pane are performedin response to receiving the input corresponding to the selection of theselectable item.